<template>
  <div class="m_content">
    <h3>嘿！欢迎来到Connor 的博客</h3>
    <div>
      <el-avatar :size="75" :src="user.avater"></el-avatar>
      <div>{{user.username}}</div>
    </div>
    <div class="m_maction">
      <span>
        <el-link href="/blogs" type="primary">主页</el-link>
      </span>
      <el-divider direction="vertical"></el-divider>
      <span>
        <el-link href="/blog/add" type="success">发表博客</el-link>
      </span>

      <el-divider direction="vertical"></el-divider>
      <span v-show="isLoginFlag">
        <el-link @click="logout" type="danger">退出</el-link>
      </span>
      <span v-show="!isLoginFlag">
        <el-link href="/login" type="warning">登录</el-link>
      </span>
    </div>
  </div>
</template>
<script>
export default {
  name: "Header",
  data() {
    return {
      user: {
        username: "请先登录",
        avater: "",
        //   "https://moster0506.oss-cn-shanghai.aliyuncs.com/2020/05/15/1262504573984f37b7ea100ae3d2abc0file.png",
      },
      isLoginFlag: false,
    };
  },
  created() {
    // 页面初始化，从 全局Store中获取用户信息
    if (this.$store.getters.getUser) {
      this.isLoginFlag = true;
      this.user.username = this.$store.getters.getUser.username;
      this.user.avater = this.$store.getters.getUser.avater;
    }
  },
  computed: {},
  methods: {
    // 退出方法
    logout() {
      const _this = this;
      _this.$axios
        .get("/logout", {
          headers: {
            // 添加token
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          // 清除全局 store 数据
          _this.$store.commit("REMOVE_INFO");
          // 跳到登陆页
          _this.$router.push("/login");
        });
      _this.$message({
        // showClose: true,
        message: "退出成功",
        type: "success",
        duration: 2 * 1000,
      });
    },
  },
};
</script>
<style scoped>
.m_content {
  margin: 0 auto;
  text-align: center;
}
.m_maction {
  margin: 10px 0;
}
</style>
